<script setup>
import { ref } from 'vue'
defineProps({
  dataList: {
    type: Array,
    default: () => [],
  },
})
const emit = defineEmits(['change'])

const activeIndex = ref(-1)
const setItem = (item, index) => {
  if (item.reservedPeople >= item.maxPeople) return
  activeIndex.value = index
  emit('change', item)
}

const resetIndex = (value) => {
  activeIndex.value = value
}

defineExpose({
  resetIndex,
})
</script>

<template>
  <view class="time-range">
    <view
      class="item"
      :class="activeIndex === index ? 'active' : ''"
      v-for="(item, index) in dataList"
      :key="index"
      @click="setItem(item, index)"
    >
      <view class="time"
        >{{ item.startTime.slice(0, 5) }}-{{ item.endTime.slice(0, 5) }}</view
      >
      <view class="num">
        {{
          item.reservedPeople >= item.maxPeople
            ? '已约满'
            : `(${item.reservedPeople}/${item.maxPeople})`
        }}
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.time-range {
  display: flex;
  flex-wrap: wrap;
  .item {
    border-radius: 8rpx;
    background: #f5f5f5;
    padding: 24rpx 32rpx;
    margin-right: 22rpx;
    margin-bottom: 30rpx;
    font-size: 28rpx;
    font-weight: 500;
    color: #333333;
    text-align: center;
  }
  .item:nth-child(3n) {
    margin-right: 0;
  }
  .active {
    background: #fff8f5;
    color: #ea5506;
    border: 1px solid #ea5506;
  }
}
</style>
